axios.defaults.baseURL = 'http://ajax-api.itheima.net'

const list = document.querySelector('.top')

axios({
  url: '/api/category/top',
}).then(({data :res}) => {
  const { data } = res
  const arr = data.map(({ id }) => {
  return   axios({
     url :'/api/category/sub?id='+id,
   })
  })
  return Promise.all(arr)
}).then(res => {
 let html =  res.map(({data : res}) => {
    return `
    <li>
        <a href="javascript:;">${res.data.name}</a>
        <ul class="sub">
          ${res.data.children.map(item => {
            return `
            <li>
            <a href="javascript:;">
              <span>${item.name}</span>
              <img src="${item.picture}" alt="">
            </a>
          </li>
            `
          }).join('')}
        </ul>
      </li>
    `
 }).join('')
  list.innerHTML = html
  })

